<template>
  <div class="order-detail">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item :to="{ path: '/tobepaidlist' }">待支付清单</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/payorderdetail',query:{id:this.$route.query.id} }">待支付清单详情</el-breadcrumb-item>
            <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>-->
    <div class="customerInfo">
      <p class="title">客户信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">姓名</td>
          <td>{{list.customerName}}</td>
          <td class="backTd">手机号</td>
          <td>{{list.customerPhone | initPhone}}</td>
          <td class="backTd">性别</td>
          <td>{{list.customerSexText}}</td>
        </tr>
        <tr>
          <td class="backTd">意向楼盘</td>
          <td>{{list.devName}}</td>
          <td class="backTd">客户来源</td>
          <td>{{list.customerSourceText}}</td>
          <td class="backTd">证件类型</td>
          <td>{{list.customerIdType}}</td>
        </tr>
        <tr>
          <td class="backTd">证件号码</td>
          <td>{{list.customerIdNum}}</td>
          <td class="backTd">证件姓名</td>
          <td>{{list.customerIdCardName}}</td>
          <td class="backTd"></td>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="Vperson" v-if="list.reaiseOrderPayRecord.length > 0">
      <p class="title">支付信息-会员费</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">应付款金额</td>
          <td>{{toFixedFn(list.raiseOrderPayAmount)}}</td>
          <td class="backTd">已付款金额</td>
          <td>{{toFixedFn(list.raiseOrderPaidAmount)}}</td>
          <td class="backTd">待付款金额</td>
          <td>{{toFixedFn(list.raiseOrderWillAmount)}}</td>
        </tr>
        <tr>
          <td class="backTd">支付方式</td>
          <td>{{list.reaiseOrderPayRecord[0].payTypeName}}</td>
          <td class="backTd">支付时间</td>
          <td
            style="cursor:pointer;color:blue;"
            @click="dialogVisible=true"
          >{{initTime(list.reaiseOrderPayRecord[0].payTime)}}</td>
          <td class="backTd">交易流水号</td>
          <td>{{list.reaiseOrderPayRecord[0].serialNumber}}</td>
        </tr>
      </table>
    </div>
    <div class="developerMaidTab">
      <p class="title">开发商结佣信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">应结佣金额</td>
          <td>{{toFixedFn(list.shouldDeveloperBrokerageAmount)}}</td>
          <td class="backTd">已结佣金额</td>
          <td>{{toFixedFn(list.yetDeveloperBrokerageAmount)}}</td>
          <td class="backTd">待结佣金额</td>
          <td>{{toFixedFn(list.willDeveloperBrokerageAmount)}}</td>
        </tr>
        <tr v-for="(item,index) in list.developerRecord" :key="index">
          <td class="backTd">第{{index+1}}次结佣金额</td>
          <td>{{toFixedFn(item.amount)}}</td>
          <td class="backTd">第{{index+1}}次结佣时间</td>
          <td>{{initTime(item.time)}}</td>
          <td class="backTd">第{{index+1}}次结佣批次</td>
          <td>{{item.batchCode}}</td>
        </tr>
      </table>
    </div>
    <div class="developerReturn">
      <p class="title">开发商回款信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">应回款金额</td>
          <td>{{toFixedFn(list.developerShouldReturnAmount)}}</td>
          <td class="backTd">已回款金额</td>
          <td>{{toFixedFn(list.developerYetReturnAmount)}}</td>
          <td class="backTd">待回款金额</td>
          <td>{{toFixedFn(list.developerWillReturnAmount)}}</td>
        </tr>
        <tr v-for="(item,index) in list.developerReturnRecord" :key="index">
          <td class="backTd">第{{index+1}}次回款金额</td>
          <td>{{toFixedFn(item.amount)}}</td>
          <td class="backTd">第{{index+1}}次回款时间</td>
          <td>{{initTime(item.returnTime)}}</td>
          <td class="backTd">第{{index+1}}次回款批次</td>
          <td>{{item.batchCode}}</td>
        </tr>
      </table>
    </div>
    <div class="personal">
      <p class="title" v-if="this.$route.query.type == 6">网络推客结佣信息</p>
      <p class="title" v-else>个人结佣信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">预计结佣</td>
          <td>{{toFixedFn(list.brokerBrokerageAmount)}}</td>
          <td class="backTd">应结佣金额</td>
          <td>{{toFixedFn(list.yetBrokerBrokerageAmount)}}</td>
          <td class="backTd">待结佣金额</td>
          <td>{{toFixedFn(list.willBrokerBrokerageAmount)}}</td>
        </tr>
        <tr>
          <td class="backTd">第一次结佣金额</td>
          <td>{{list.brokerRecord.length >= 1 ? addfn(list.brokerRecord[0].brokerExamineState,list.brokerRecord[0].broAmount) : "待定"}}</td>
          <td class="backTd">第一次结佣时间</td>
          <td>{{list.brokerRecord.length >= 1 ? addmyformatter(list.brokerRecord[0].brokerExamineState,list.brokerRecord[0].brokerTime) : "待定"}}</td>
          <td class="backTd">业绩归属人</td>
          <td>{{list.brokerApplyUserName}}</td>
        </tr>
        <tr>
          <td class="backTd">第二次结佣金额</td>
          <td>{{list.brokerRecord.length >= 2 ? addfn(list.brokerRecord[1].brokerExamineState,list.brokerRecord[1].broAmount) : "待定"}}</td>
          <td class="backTd">第二次结佣时间</td>
          <td>{{list.brokerRecord.length >= 2 ? addmyformatter(list.brokerRecord[1].brokerExamineState,list.brokerRecord[1].brokerTime) : "待定"}}</td>
          <td class="backTd">手机号</td>
          <td>{{list.brokerApplyUserPhone}}</td>
        </tr>
        <tr v-for="(item,index) in list.brokerRecord" :key="index">
          <span v-if="index > 2">
            <td class="backTd">第{{index+1}}次结佣金额</td>
            <td>{{addfn(item.brokerExamineState,item.broAmount) }}</td>
            <td class="backTd">第{{index+1}}次结佣时间</td>
            <td>{{addmyformatter(item.brokerExamineState,item.brokerTime) }}</td>
            <td class="backTd"></td>
            <td></td>
          </span>
        </tr>
      </table>
    </div>
    <div class="company">
      <p class="title">经纪人奖励信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">预计结佣</td>
          <td>{{toFixedFn(list.brokerRewardAmount)}}</td>
          <td class="backTd">应结佣金额</td>
          <td>{{toFixedFn(list.yetBrokerRewardAmount)}}</td>
          <td class="backTd">待结佣金额</td>
          <td>{{toFixedFn(list.willBrokerRewardAmount)}}</td>
        </tr>
        <tr>
          <td class="backTd">第一次结佣金额</td>
          <td>{{list.brokerReward.length >= 1 ? addfns(list.brokerReward[0].brokerExamineState,list.brokerReward[0].broAmount) : "待定"}}</td>
          <td class="backTd">第一次结佣时间</td>
          <td>{{list.brokerReward.length >= 1 ? addmyformatters(list.brokerReward[0].brokerExamineState,list.brokerReward[0].brokerTime) : "待定"}}</td>
          <td class="backTd">业绩归属人</td>
          <td>{{list.brokerApplyUserName}}</td>
        </tr>
        <tr>
          <td class="backTd">第二次结佣金额</td>
          <td>{{list.brokerReward.length >= 2 ? addfns(list.brokerReward[1].brokerExamineState,list.brokerReward[1].broAmount) : "待定"}}</td>
          <td class="backTd">第二次结佣时间</td>
          <td>{{list.brokerReward.length >= 2 ? addmyformatters(list.brokerReward[1].brokerExamineState,list.brokerReward[1].brokerTime) : "待定"}}</td>
          <td class="backTd">手机号</td>
          <td>{{list.brokerApplyUserPhone}}</td>
        </tr>
      </table>
    </div>
    <div class="company" v-if="this.$route.query.type != 6">
      <p class="title">经纪公司结佣信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">预计结佣</td>
          <td>{{toFixedFn(list.companyBrokerageAmount)}}</td>
          <td class="backTd">应结佣金额</td>
          <td>{{toFixedFn(list.yetCompanyBrokerageAmount)}}</td>
          <td class="backTd">待结佣金额</td>
          <td>{{toFixedFn(list.willCompanyBrokerageAmount)}}</td>
        </tr>
        <tr>
          <td class="backTd">第一次结佣金额</td>
          <td>{{list.comRecord.length >= 1 ? addfn(list.comRecord[0].examineState,list.comRecord[0].comAmount) : "待定"}}</td>
          <td class="backTd">第一次结佣时间</td>
          <td>{{list.comRecord.length >= 1 ? addmyformatter(list.comRecord[0].examineState,list.comRecord[0].time) : "待定"}}</td>
          <td class="backTd">业绩归属人</td>
          <td>{{list.brokerApplyUserName}}</td>
        </tr>
        <tr>
          <td class="backTd">第二次结佣金额</td>
          <td>{{list.comRecord.length >= 2 ? addfn(list.comRecord[1].examineState,list.comRecord[1].comAmount) : "待定"}}</td>
          <td class="backTd">第二次结佣时间</td>
          <td>{{list.comRecord.length >= 2 ? addmyformatter(list.comRecord[1].examineState,list.comRecord[1].time) : "待定"}}</td>
          <td class="backTd">手机号</td>
          <td>{{list.brokerApplyUserPhone}}</td>
        </tr>
        <tr v-for="(item,index) in list.comRecord" :key="index">
          <span v-if="index >= 2">
            <td class="backTd">第{{index+1}}次结佣金额</td>
            <td>{{addfn(item.examineState,item.comAmount) }}</td>
            <td class="backTd">第{{index+1}}次结佣时间</td>
            <td>{{addmyformatter(item.examineState,item.time) }}</td>
            <td class="backTd"></td>
            <td></td>
          </span>
        </tr>
      </table>
    </div>
    <div class="followLatesInfo">
      <p class="title">跟进最新信息</p>
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">跟进状态</td>
          <td>{{list.followTypeText}}</td>
          <td class="backTd">时间</td>
          <td>{{initTime(list.followCreateTime)}}</td>
          <td class="backTd">业绩归属人</td>
          <td>{{list.followBrokerName}}</td>
        </tr>
        <tr>
          <td class="backTd">所属楼栋</td>
          <td>{{list.buildName}}</td>
          <td class="backTd">所属单元</td>
          <td>{{list.unit}}</td>
          <td class="backTd">所属楼层</td>
          <td>{{list.floor}}</td>
        </tr>
        <tr>
          <td class="backTd">所属房号</td>
          <td>{{list.cellName}}</td>
          <td class="backTd">户型</td>
          <td>{{list.structure}}</td>
          <td class="backTd">建筑面积</td>
          <td>{{toFixedFn(list.farea)}}</td>
        </tr>
        <tr>
          <td class="backTd">套内面积</td>
          <td>{{toFixedFn(list.uarea)}}</td>
          <td class="backTd">成交价格</td>
          <td>{{toFixedFn(list.purchasePrice)}}</td>
          <td class="backTd">订单号</td>
          <td>{{list.orderCode}}</td>
        </tr>
      </table>
    </div>
    <el-dialog title="支付记录" :visible.sync="dialogVisible">
      <table class="common-T" border cellspacing="0" cellpadding="0">
        <tr>
          <td class="backTd">序号</td>
          <td class="backTd">支付时间</td>
          <td class="backTd">支付方式</td>
          <td class="backTd">支付金额</td>
          <td class="backTd">交易流水号</td>
        </tr>
        <tr v-for="(item,index) in list.reaiseOrderPayRecord" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{initTime(item.payTime)}}</td>
          <td>{{item.payTypeName}}</td>
          <td>{{item.payOnThisTime}}</td>
          <td>{{item.serialNumber}}</td>
        </tr>
      </table>
      <div style="text-align:center;margin-top:20px;">
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
        <el-button type="primary" @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: 'detailorder',
  data() {
    return {
      list: {
        brokerRecord: [],
        comRecord: [],
        brokerReward: [],
        reaiseOrderPayRecord: []
      },
      orderId: this.$route.query.orderId,
      dialogVisible: false
    };
  },
  filters: {
    initPhone(phone) {
      if (phone) {
        return phone.substring(0, 3) + "****" + phone.substring(7);
      }
    }
  },
  methods: {
    loadData() {
      this.axios
        .post(api.ORDERDETAIL, { id: this.orderId })
        .then(res => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toFixedFn(value) {
      //保留两位小数并且千分位展示
      if (value != undefined && value.toString() != "" && value != null) {
        value = Number(value);
        return value
          .toFixed(2)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    },
    addfns(value1, value2) {
      if (value1 == 2) {
        if (value2 == "") {
          return "0.00";
        }
        value2 = parseFloat(value2);
        return value2
          .toFixed(2)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      } else {
        return "待定";
      }
    },
    addfn(value1, value2) {
      if (value1 == 3) {
        if (value2 == "") {
          return "0.00";
        }
        value2 = parseFloat(value2);
        return value2
          .toFixed(2)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      } else {
        return "待定";
      }
    },
    addmyformatters(value1, date) {
      if (value1 == 2) {
        // date=parseInt(date);
        date = new Date(date).getTime();
        if (date == "") {
          return "";
        }
        return utils.getTimeString(date);
      } else {
        return "待定";
      }
    },
    addmyformatter(value1, date) {
      if (value1 == 3) {
        // date=parseInt(date);
        date = new Date(date).getTime();
        if (date == "") {
          return "";
        }
        return utils.getTimeString(date);
      } else {
        return "待定";
      }
    },
    initTime(value) {
      if (value) {
        value = parseInt(value);
        return utils.getTimeString(value);
      }
    }
  },
  mounted() {
    this.loadData();
    console.log(this.pagetype)
  }
};
</script>

<style lang="stylus" scoped>
.order-detail {
  .title {
    font-size: 20px;
  }

  .common-T {
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
    table-layout: fixed;

    td {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    .backTd {
      background-color: rgba(242, 242, 242, 1);
    }
  }
}
</style>
